<!DOCTYPE html>
<html lang="en">
<head>

	<title>Profile Page - Window Popup</title>

	<!-- Required meta tags always come first -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">

	<!-- Theme Styles CSS -->
	<link rel="stylesheet" type="text/css" href="css/theme-styles.css">
	<link rel="stylesheet" type="text/css" href="css/blocks.css">

	<!-- Main Font -->
	<script src="js/webfontloader.min.js"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>

	<link rel="stylesheet" type="text/css" href="css/fonts.css">

	<!-- Styles for plugins -->
	<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/daterangepicker.css">


</head>

<body class="overlay-enable modal-open">


<!-- Window-popup Open Photo Popup V2 -->

<div class="modal fade show" id="open-photo-popup-v2" style="display: block">
	<div class="modal-dialog ui-block window-popup open-photo-popup open-photo-popup-v2">
		<a href="#" class="close icon-close" data-dismiss="modal" aria-label="Close">
			<svg class="olymp-close-icon"><use xlink:href="icons/icons.svg#olymp-close-icon"></use></svg>
		</a>

		<div class="open-photo-thumb">

			<div class="swiper-container" data-effect="fade" data-autoplay="4000">

				<!-- Additional required wrapper -->
				<div class="swiper-wrapper">
					<!-- Slides -->

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>

					<div class="swiper-slide">
						<div class="photo-item" data-swiper-parallax="-300" data-swiper-parallax-duration="500">
							<img src="img/open-photo2.jpg" alt="photo">
							<div class="overlay"></div>
							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>
							<a href="#" class="tag-friends" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
								<svg class="olymp-happy-face-icon"><use xlink:href="icons/icons.svg#olymp-happy-face-icon"></use></svg>
							</a>

							<div class="content">
								<a href="#" class="h6 title">Photoshoot 2016</a>
								<time class="published" datetime="2017-03-24T18:18">2 weeks ago</time>
							</div>
						</div>
					</div>


				</div>

			</div>

			<!--Pagination tabs-->

			<div class="slider-slides">
				<a href="#" class="slides-item ">
					<img src="img/photo-tabs1.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<a href="#" class="slides-item ">
					<img src="img/photo-tabs2.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<a href="#" class="slides-item ">
					<img src="img/photo-tabs3.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<a href="#" class="slides-item ">
					<img src="img/photo-tabs4.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>
				<a href="#" class="slides-item ">
					<img src="img/photo-tabs5.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<a href="#" class="slides-item ">
					<img src="img/photo-tabs6.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<a href="#" class="slides-item ">
					<img src="img/photo-tabs7.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<a href="#" class="slides-item ">
					<img src="img/photo-tabs8.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<a href="#" class="slides-item ">
					<img src="img/photo-tabs9.jpg" alt="slide">
					<div class="overlay overlay-dark"></div>
				</a>

				<!--Prev Next Arrows-->

				<svg class="btn-next olymp-popup-right-arrow"><use xlink:href="icons/icons.svg#olymp-popup-right-arrow"></use></svg>

				<svg class="btn-prev olymp-popup-left-arrow"><use xlink:href="icons/icons.svg#olymp-popup-left-arrow"></use></svg>

			</div>

		</div>

		<div class="open-photo-content">

			<article class="hentry post">

				<div class="post__author author vcard inline-items">
					<img src="img/author-page.jpg" alt="author">

					<div class="author-date">
						<a class="h6 post__author-name fn" href="02-ProfilePage.html">James Spiegel</a>
						<div class="post__date">
							<time class="published" datetime="2017-03-24T18:18">
								2 hours ago
							</time>
						</div>
					</div>

					<div class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg>
						<ul class="more-dropdown">
							<li>
								<a href="#">Edit Post</a>
							</li>
							<li>
								<a href="#">Delete Post</a>
							</li>
							<li>
								<a href="#">Turn Off Notifications</a>
							</li>
							<li>
								<a href="#">Select as Featured</a>
							</li>
						</ul>
					</div>

				</div>

				<p>Here’s a photo from last month’s photoshoot. We really had a great time and got a batch of incredible shots for the new catalog.</p>

				<p>With: <a href="#">Jessy Owen</a>, <a href="#">Marina Valentine</a></p>

				<div class="post-additional-info inline-items">

					<a href="#" class="post-add-icon inline-items">
						<svg class="olymp-heart-icon"><use xlink:href="icons/icons.svg#olymp-heart-icon"></use></svg>
						<span>148</span>
					</a>


					<div class="comments-shared">
						<a href="#" class="post-add-icon inline-items">
							<svg class="olymp-speech-balloon-icon"><use xlink:href="icons/icons.svg#olymp-speech-balloon-icon"></use></svg>
							<span>61</span>
						</a>

						<a href="#" class="post-add-icon inline-items">
							<svg class="olymp-share-icon"><use xlink:href="icons/icons.svg#olymp-share-icon"></use></svg>
							<span>32</span>
						</a>
					</div>


				</div>

				<div class="control-block-button post-control-button">

					<a href="#" class="btn btn-control">
						<svg class="olymp-like-post-icon"><use xlink:href="icons/icons.svg#olymp-like-post-icon"></use></svg>
					</a>

					<a href="#" class="btn btn-control">
						<svg class="olymp-comments-post-icon"><use xlink:href="icons/icons.svg#olymp-comments-post-icon"></use></svg>
					</a>

					<a href="#" class="btn btn-control">
						<svg class="olymp-share-icon"><use xlink:href="icons/icons.svg#olymp-share-icon"></use></svg>
					</a>

				</div>

			</article>

			<div class="mCustomScrollbar" data-mcs-theme="dark">

				<ul class="comments-list">
					<li>
						<div class="post__author author vcard inline-items">
							<img src="img/avatar48-sm.jpg" alt="author">

							<div class="author-date">
								<a class="h6 post__author-name fn" href="#">Marina Valentine</a>
								<div class="post__date">
									<time class="published" datetime="2017-03-24T18:18">
										46 mins ago
									</time>
								</div>
							</div>

							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>

						</div>

						<p>I had a great time too!! We should do it again!</p>

						<a href="#" class="post-add-icon inline-items">
							<svg class="olymp-heart-icon"><use xlink:href="icons/icons.svg#olymp-heart-icon"></use></svg>
							<span>8</span>
						</a>
						<a href="#" class="reply">Reply</a>
					</li>

					<li>
						<div class="post__author author vcard inline-items">
							<img src="img/avatar4-sm.jpg" alt="author">

							<div class="author-date">
								<a class="h6 post__author-name fn" href="#">Chris Greyson</a>
								<div class="post__date">
									<time class="published" datetime="2017-03-24T18:18">
										1 hour ago
									</time>
								</div>
							</div>

							<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="icons/icons.svg#olymp-three-dots-icon"></use></svg></a>

						</div>

						<p>Dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>

						<a href="#" class="post-add-icon inline-items">
							<svg class="olymp-heart-icon"><use xlink:href="icons/icons.svg#olymp-heart-icon"></use></svg>
							<span>7</span>
						</a>
						<a href="#" class="reply">Reply</a>

					</li>
				</ul>

			</div>

			<form class="comment-form inline-items">

				<div class="post__author author vcard inline-items">
					<img src="img/avatar73-sm.jpg" alt="author">
				</div>

				<div class="form-group with-icon-right is-empty">
					<textarea class="form-control" placeholder="Press Enter to post..." ></textarea>
					<div class="add-options-message">
						<a href="#" class="options-message">
							<svg class="olymp-camera-icon"><use xlink:href="icons/icons.svg#olymp-camera-icon"></use></svg>
						</a>
					</div>
				</div>

			</form>

		</div>

	</div>
</div>

<!-- Window-popup Open Photo Popup V2 -->


<!-- jQuery first, then Other JS. -->
<script src="js/jquery-3.2.0.min.js"></script>
<!-- Js effects for material design. + Tooltips -->
<script src="js/material.min.js"></script>
<!-- Helper scripts (Tabs, Equal height, Scrollbar, etc) -->
<script src="js/theme-plugins.js"></script>
<!-- Init functions -->
<script src="js/main.js"></script>

<!-- Select / Sorting script -->
<script src="js/selectize.min.js"></script>

<!-- Swiper / Sliders -->
<script src="js/swiper.jquery.min.js"></script>

<script src="js/mediaelement-and-player.min.js"></script>
<script src="js/mediaelement-playlist-plugin.min.js"></script>

</body>
</html>